<template>

    <div>
        <h1 class="title">水果零兽管理系统</h1>
        <div class="login-container">

            <h2 class="title">欢迎登录</h2>

            <el-form ref="loginForm" :model="form" label-width="80px" :rules="rules">
                <el-form-item/>
                <el-form-item prop="username" label="用户名" >
                    <el-input type="text" v-model="form.username" placeholder="请输入用户名"></el-input>
                </el-form-item>

                <el-form-item prop="password" label="密码">
                    <el-input type="password" v-model="form.password" placeholder="请输入密码" ></el-input>
                </el-form-item>
                <el-form-item prop="captcha" label="验证码">
                    <el-row :gutter="5">
                        <el-col :span="19">
                            <el-input type="text"  v-model="form.captcha" placeholder="请输入验证码" ></el-input>
                        </el-col>
                        <el-col :span="4">
                            <img style="width: 100px;height:40px;" src="http://localhost:9000/captcha" @click="captchaClick" ref="imgCaptcha">
                        </el-col>
                    </el-row>
                </el-form-item>
                <el-form-item/>
                <el-form-item>
                    <el-button class="button" type="primary" @click="onSubmit">登录</el-button>
                </el-form-item>
                <router-link to='/register' style="text-decoration: none">
                    <a class="register-title">
                        <span style="color: gray;" >还没有账号？</span>
                        <span style="color: gray;">去注册</span>
                    </a>
                </router-link>
            </el-form>
        </div>
    </div>



</template>

<script>
    import { login } from '../api/require'
    import {mapMutations} from 'vuex'
    import {validatePhone} from "../utils/util";
    export default {
        name: "Login",
        data() {
            return {
                form: {
                    username: '',
                    password:'',
                    captcha:''
                },
                rules: {
                    username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
                    password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
                    telephone: [{  validator: validatePhone,required:true, trigger: 'blur' }],
                },
            }
        },
        methods: {
            ...mapMutations(['changeLogin']),
            //表单提交
            onSubmit() {
                console.log(this.form);
                this.$refs.loginForm.validate((valid)=>{
                    if (valid){
                       login(this.form).then(res=>{
                           if (res.data.code === 500){
                               this.captchaClick();
                               this.$message({message:res.data.message,type:"error"});
                               this.form = {}
                           }else if (res.data.code === 200){
                               this.captchaClick();
                               this.$message({message:res.data.message,type:"success"});
                               const userInfo = res.data.obj;
                               // localStorage.setItem("userInfo",userInfo)
                               this.changeLogin(userInfo)
                               this.form = {}
                               this.$router.push({
                                   path: '/main'
                               })
                           }
                       }).catch(err=>{
                           this.captchaClick();
                           this.form = {}
                           console.log(err)
                           this.$message({message:"系统有误",type:"error"});
                       })
                    }else{
                        this.captchaClick();
                        this.form = {}
                        this.$message("数据格式有误")
                    }
                });
            },
            //验证码点击
            captchaClick(){
                this.$refs.imgCaptcha.src = `http://127.0.0.1:9000/captcha?r=${Math.random()}`
            },
            //验证码校验规则
            validateCaptcha (rule, value, callback)  {
                let reg = /^[A-Za-z0-9]{4}$/;
                if (!value) {
                    callback(new Error('请填写验证码'));
                } else if(value.length !== 4){
                    callback(new Error('请输入4位的密码'));
                }else if(!reg.test(value)){
                    callback(new Error('验证码只能是数字和字母'));
                }else {
                    callback();
                }
            }

        }
    }
</script>

<style scoped lang="scss">
        .title{

            text-align: center;
        }
        .login-container{
            width: 35%;
            height: 400px;
            padding:  20px;
            margin: 100px auto;
            background: #99b0e8;
            border-radius: 20px;

            .button{
                width: 100%;
            }
            .register-title{
                display: block;
                text-align: center;
                text-decoration: none;
            }
        }


</style>
